<template lang="pug">
  el-drawer.commonDrawer(
    title="添加课程"
    :visible="visibleDialog"
    append-to-body
    direction="rtl"
    size="760px"
    destroy-on-close,
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="items"
        v-loading="loading"
        btnClass="footerBtn"
        :layoutCol="{sm: 24, md: 24, lg: 24}"
        :showBtns="false"
      )
        template(slot="form-courseId")
          //- el-button(v-if="!courseSelectObj.course.activityContent" type="success" size="large" @click="() => courseSelectoreHandle()" round plain) 选择课程
          div.xuanz(v-if="!courseSelectObj.course.activityContent" @click="() => courseSelectoreHandle()")
            img(src="@/assets/xuanz.png")
            p 选择课程
          p.course(v-if="courseSelectObj.course.activityContent")
            span {{courseSelectObj.course.activityContent}}
            i.ml5.vm(class="el-icon-close" @click="courseSelectObj.course = {}")
      //- 课程选择
      course-selector(
        v-model="courseSelectObj.visible"
        :initCourse.sync="courseSelectObj.course"
        packageType="2"
        :courses="courseCategory"
        @sureHandle="courseHandle"
      )
      .drawer-footer.tr
      el-button.gradientVertical(size="large" round :loading="submitting" @click="submitHandle") 确定
</template>
<script>
import { mapGetters } from 'vuex'
import CourseSelector from '../courseSelector'
import { getEarlyClasses, earlySchuleAdd } from '../../api'

export default {
  components: {
    CourseSelector
  },
  props: {
    date: {
      type: String(),
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitting: false,
      loading: false,
      classes: [],
      courseSelectObj: {
        visible: false,
        course: {}
      },

      courseCategory: [
        { type: '3', category: '1', label: '系统课' }
      ]
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    items () {
      const { classes } = this
      return [
        {
          key: 'Time',
          label: '上课时间',
          type: 'timePicker',
          formatStr: 'HH:mm',
          formatFlag: true,
          rules: [{ required: true, message: '上课时间不能为空' }],
          fieldProps: {
            'is-range': true
          }
        },
        {
          key: 'classesId',
          type: 'select',
          label: '上课班级',
          rules: [{ required: true, message: '上课班级不能为空' }],
          fieldProps: {
            placeholder: '班级选择',
            options: classes,
            props: { value: 'id', label: 'name' }
          }
        },
        {
          key: 'courseId',
          label: '上课内容',
          type: 'slot',
          rules: [{ required: true, message: '上课内容不能为空' }],
          initialValue: '1'
        }
      ]
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    getClasses () {
      this.loading = true
      getEarlyClasses({ areaId: this.curArea.areaId }).then(res => {
        this.classes = res
      }).finally(() => {
        this.loading = false
      })
    },
    courseSelectoreHandle () {
      this.courseSelectObj = {
        visible: true,
        course: {}
      }
    },
    courseHandle (course) {
      console.log(course)
      this.courseSelectObj = {
        visible: false,
        course
      }
    },
    async submitHandle () {
      const values = await this.$refs.form.submitForm()
      const { date, courseSelectObj } = this
      if (!Object.prototype.hasOwnProperty.call(courseSelectObj.course, 'id')) {
        this.$message.warning('请选择上课内容')
        return
      }

      this.submitting = true
      earlySchuleAdd({
        areaId: this.curArea.areaId
      }, {
        ...values,
        date,
        courseId: courseSelectObj.course.resObj
      }).then(() => {
        this.$emit('getList')
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.course {
  position: relative;
  padding: 5px 0;

  >i {
    position: absolute;
    right: 0;
    top: 0
  }
}

/*.formWrapper {*/
/*padding: 0 16px;*/
/*position: relative;*/

/*::v-deep{*/
/*.footerBtn{*/
/*text-align: right;*/
/*position: fixed;*/
/*bottom: 16px;*/
/*right: 16px;*/
/*z-index: 10*/
/*}*/
/*}*/

/*}*/
.xuanz {
  width: 112px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #DCDCDC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 32px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  font-style: normal;
  text-transform: none;

  img{
    margin-right: 8px;
  }
}
</style>
